<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#but{
			position: absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			height: 100px;
			width: 100px;
		}

		#hah{
			width: 100px;
			height: 100px;
			background: yellow;
		}
		html,body{
			height: 100%;
			width: 100%;
		}
		#munue{
			position: fixed;
			width: 100px;
			height: 100px;
		}

	</style>
</head>
<button id="but">点我试试</button>

<div id="hah"></div>

<div id="munue">
	这是我的邮件菜单

</div>
<body>
	<script>
		// 事件3要素 1、事件源，2、事件本身，3、事件的处理逻辑
		var but = document.querySelector("#but");
		var hah = document.querySelector("#hah");
		var munue = document.querySelector("#munue");
		but.draggable=true;
		but.onclick = function (e) {
			console.log(e);
		}

		hah.ondrag = function (argument) {
			alert(1111);
		}
		document.body.oncontextmenu = function (e) {
			e.stopPropagation(); //取消冒泡
			e.preventDefault();//取消浏览器的默认行为

// 			clientX
// :
// 360
// clientY
// :
// 171

			munue.style.top=e.clientY+"px";
			munue.style.left=e.clientX+"px";


		}
	</script>
</body>
</html>